<template>
	<!--  -->
	<view class="container">
		<hx-navbar :fixed="true" :color="['#888888','#888888']" barPlaceholder="hidden" transparent="auto" :back="true"
			:rightSlot="true" :background-color="[245,245,245]" :pageScroll.sync="pageScroll">

			<block slot="left">
				<view class="" style="margin-left: 6px; font-size: 22px;">

				</view>

			</block>
			<!-- ctn -->
			<view class=""
				style="flex: 1;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;float: right;">


				<view></view>
				<view class="leftBox" style="font-size: 22px;display: flex;align-items: center;">
					<u-icon name="camera" size='30' style="margin-right: 26upx;" :color="color"
						@tap="toPage('/pages/discover/setCircleFriend')"></u-icon>
					<u-icon name="account" size='30' :color="color"
						@tap="toPage('/pages/discover/circleFriendList')"></u-icon>

				</view>

			</view>
		</hx-navbar>

		<view class="status_bar">


		</view>
		<view class="" style="position: absolute;
		width: 100%;
		top: 10%;
		left: 0%;padding-left:30px;padding-right:15px;">
			<view class="album-top">
				<view class="album-top__avatar">
					<view style="border-radius: 30upx;" v-if="user_info.avatar">
						<!-- 	<u--image :showLoading="true" :src="user_info.avatar" width="130upx" height="130upx"
							radius="10upx"></u--image> -->
						<image style="width: 60px;height: 60px;border-radius: 10px;"
							v-if="user_info.user_avatar_file_name"
							:src="`http://chat.zwsmcn.com:8090/UserAvatarDownloader?action=ad&user_uid=${user_info.user_uid}&user_local_cached_avatar=${user_info.user_avatar_file_name}&enforceDawnload=1&token=`"
							class="face">
						</image>
						<image v-else src="../../static/img/face.png" class="face"></image>
					</view>
					<view v-else class="name-img">{{user_info.nickname | firstCharFilter}}</view>
				</view>
				<!-- <view>{{user_info}}</view> -->
				<view class="album-top__content">
					<view style="color: #ffffff;font-size: 22px;"> {{user_info.nickname}}</view>
				</view>
			</view>
		</view>
		<view class="bg-box" v-if="list.length == 0">
			<image class="imgs" src="../../static/image/img-none@3x.png"></image>
		</view>

		<view class="scroll-view-box">
			<scroll-view scroll-y class="list">
				<!-- <view class="space" @tap="closeSwipe"></view> -->
				<uni-swipe-action ref="swipe">
					<uni-swipe-action-item v-for="(item, index) in list" :key="index">
						<view class="u-page">
							<view class="u-demo-block">
								<view class="u-demo-block__content">
									<view class="album">
										<view class="album__avatar" @tap="toDetail(item)">

											<view style="border-radius: 30upx;" v-if="item.user.user_avatar_file_name">
												<u--image :showLoading="true"
													:src="`http://chat.zwsmcn.com:8090/UserAvatarDownloader?action=ad&user_uid=${item.user.user_uid}&user_local_cached_avatar=${item.user.user_avatar_file_name}&enforceDawnload=1&token=`"
													width="110upx" height="110upx" radius="10upx"></u--image>

											</view>
											<view v-else class="name-img">{{item.user.nickname | firstCharFilter}}
											</view>
										</view>
										<view class="album__content">
											<view>
												<view style="display: flex;" @tap="toDetail(item)">
													<view>{{item.user.nickname}}</view>
													<image v-if="item.is_beau==1"
														style="width: 30upx;height: 30upx;margin-left: 4px;"
														src="../../static/image/tag1@3x.png"></image>
													<!-- 	<image style="width: 30upx;height: 30upx;margin-left: 4px;"
														src="../../../static/image/tag2@3x.png"></image>
													<image style="width: 30upx;height: 30upx;margin-left: 4px;"
														src="../../../static/image/tag3@3x.png"></image> -->
													<image v-if="item.user.user_level !=0"
														style="width: 60upx;height:30upx;margin-left: 4px;"
														src="../../static/image/icon-vip@3x.png" mode="aspectFit">
													</image>
												</view>
												<view style="font-size: 10px;margin-top: 10px;">{{item.update_time}}
												</view>
											</view>
											<u-icon name="trash" size='26' v-if="item.user_id == userId" color="#ccdee8"
												@click="delcircle(item)"></u-icon>
										</view>
									</view>
									<view class="album-container">
										<u--text margin="0 0 8px 0" :text="item.content"></u--text>
										<u-album multipleSize="100px" v-if="item.pictures"
											:urls="item.pictures"></u-album>
									</view>
									<view class="icon-box">
										<u-icon v-if="item.liked" name="thumb-up-fill" size='26' color="#086af3"
											style="margin-right: 20upx;" @tap="handleLike(item)"></u-icon>
										<u-icon v-else name="thumb-up" size='22' color="#ccdee8"
											style="margin-right: 20upx;" @tap="handleLike1(item)"></u-icon>
										<text v-if="item.liked"
											style="margin-right: 15px;margin-left: -5px;">{{item.like_count}}</text>
										<u-icon v-if="item.commentShow" name="chat-fill" size='26' color="#086af3"
											style="margin-right: 20upx;"></u-icon>
										<u-icon v-else name="chat" size='26' color="#ccdee8"
											style="margin-right: 20upx;" @tap="handleSpesk(item)"></u-icon>
									</view>
									<view class="speak-box">
										<view v-for="item_c in item.comment_list" :key="item_c.id"
											style="display: flex;margin-top: 4px;font-size: 12px;">
											<span style="color: #1e70d3;">{{item_c.nickname}}</span>:{{item_c.content}}
											<u-icon name="trash" size='18' v-if="item_c.user_id == userId"
												color="#454c4f" @click="delcomment(item_c,item.id)"
												style="margin-left: 20px;"></u-icon>
										</view>
									</view>

									<!-- <view v-else-if="item.valueSpeak" class="speak-box">
										<span style="color: #1e70d3;">{{$util.getUsername()}}</span>:{{item.valueSpeak}}
									</view> -->
									<view v-if="item.commentShow" style="position: relative;">
										<u--input placeholder="说点什么吧" border="surround" v-model="item.valueSpeak"
											@confirm="confirmSpeak(item.id)">
										</u--input>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>

				</uni-swipe-action>
			</scroll-view>
		</view>
		<!-- <view v-else class="none-data"></view> -->
		<u-popup :show="commentShow" @close="recordsClose" mode="center" :round="20">
			<view class="add-comment">
				<view class="info">

					<u--textarea :cursor-spacing="20" :adjustPosition="true" :show-confirm-bar="false"
						:auto-height="false" :count="true" :fixed="true" maxlength="200" v-model="valueSpeak"
						placeholder-class="input-bg" :height="70"
						:placeholder="replyCommentId > 0 ? '回复 ' + replyNickname + '：' : '发表评论'" />

					<!-- <view class="add"> -->
					<view class="add" type="primary" size="mini" @click="addCommentOrReply()">
						发送
					</view>
					<!-- </view> -->
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

				touchData: {},
				pageScroll: {},
				userId: uni.getStorageSync('userId') || '',
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				//urlList: 'https://cdn.uviewui.com/uview/album/1.jpg',
				urlList: '',
				replyCommentId: '',
				comment_info: {},
				circle_id: '',
				commentShow: false,
				valueSpeak: '',
				valueSpeak1: '',
				page: 1, // 当前页数
				pageSize: 5, // 每页条数
				hasMore: true, // 是否有更多数据
				list: [],
				user_info: {},
				color: '#fff',
				navSearchWidth: 3,
				albumWidth: 0,
			}
		},
		filters: {
			firstCharFilter(value) {
				if (value) {
					return value.charAt(0);
				}
				return '';
			}
		},
		onShow() {
			// 页面显示时，监听 'refreshData' 事件并刷新数据
			uni.$on('refreshData', this.refreshPage);
		},

		onHide() {
			// 页面隐藏时取消事件监听
			uni.$off('refreshData', this.refreshPage);
		},
		onLoad() {
			console.log(uni.getStorageSync('userId'));
			this.getpyq();
		},
		onShow() {
			this.getpyq();
			this.getuserInfo();
		},
		onReachBottom() {
			if (this.hasMore) {
				this.loadMore(); // 调用加载更多方法
			}
		},
		onPullDownRefresh() {
			this.refreshData(); // 调用刷新数据方法
		},
		mounted() {
			// this.loadMore(); // 初始化时加载数据
		},
		watch: {
			showStoreBox(val, oldVal) {
				// 		if (val == true) {

				// 			this.showStoreBoxFunc();
				// 		} else {
				// 			this.hiddenStoreBoxFunc();
				// 		}
			}
		},

		onPageScroll(e) {
			let that = this
			let top = e.scrollTop
			that.pageScrollTop = e.scrollTop
			that.pageScroll = e
			// console.log(top);
			if (top < 120) {
				if (that.navSearchWidth >= 3) {
					if (top < 3) {
						that.navSearchWidth = 3
						that.color = '#ffffff'
					} else {
						let n = top * (120 / 100)
						if (n > 100) {
							n = 100
						}
						that.navSearchWidth = n
						that.color = '#606266'
					}
				}
			} else {
				that.navSearchWidth = 100
				that.color = '#606266'
			}


		},
		methods: {
			toDetail(item) {
				let user_uid = item.user_id

				uni.navigateTo({
					url: '/pages/contacts/information?user_uid=' + user_uid
				});
			},
			refreshPage() {
				console.log('刷新页面数据');
				// 在这里写你需要刷新页面的代码，例如重新加载数据
				this.getpyq(); // 假设这里是你加载数据的函数
			},
			recordsClose() {
				this.commentShow = false
			},
			getuserInfo() {


				uni.request({
					url: this.$api.baseUrl + '/api/user/detail',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_uid: uni.getStorageSync('user_uid')
					},
					method: 'POST',
					success: res => {
						console.log(res);
						uni.hideLoading()
						if (res.data.code == 0) {
							this.user_info = res.data.data;
						}



						console.log(this.user_info, "123-=");
						// this.list = res.data;
					},
					fail: res => {
						console.log(res);
					}

				})
			},
			getpyq() {
				uni.request({
					url: this.$api.baseUrl + '/api/post/circle/friend/list',
					header: {
						'content-type': 'application/json'
					},
					data: {
						page: this.page,
						page_size: this.pageSize,
						// post_type: 1,
						user_uid: uni.getStorageSync('userId')
					},
					method: 'POST',
					success: res => {
						// console.log(res);
						uni.hideLoading();
						if (res.data.code == 0) {
							if (this.page == 1) {
								this.list = [];
							}

							for (let i = 0; i < res.data.data.length; i++) {
								let list_item = res.data.data[i];
								list_item.years = this.$util.turnTime_Java(list_item.update_time, 'date-md');
								list_item.time = this.$util.turnTime_Java(list_item.update_time, 'time-hm');
								list_item.commentShow = false; // 控制评论框显示
								list_item.valueSpeak = ''; // 存储每个帖子的评论内容


								if (list_item.pictures) {
									list_item.pictures.forEach(img_path => {
										// console.log(img_path);
										// uni.preloadImage({
										// 	url:img_path
										// });
										
										this.$util.preloadImage(img_path);
									});
								}
								// 获取每个帖子的评论列表
								this.getcomment(list_item.id);

								// this.list.push(list_item);
								// if(this.page != 1){
								// 	this.list = [...this.list, item]; // 这种方式会替换整个数组，确保视图更新
								// }else{
								let index = this.list.findIndex(l_item => l_item.id == list_item.id);
								if (index >= 0) {
									this.list[index] = list_item;
								} else {
									// this.list = [...this.list, item];
									// this.list.unshift(item);////插入到最前面
									this.list.push(list_item); ////插入到最前面
								}
								// }
							}

							if (res.data.data.length >= this.pageSize) {
								this.hasMore = true;
							} else {
								this.hasMore = false;
							}
						}
						console.log(this.list);
					},
					fail: res => {
						console.log(res);
					}
				})
			},


			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			touchStart1(e) {

				this.touchData.clientX = e.changedTouches[0].clientX;

				this.touchData.clientY = e.changedTouches[0].clientY;
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;

				this.touchData.clientX = e.changedTouches[0].clientX;

				this.touchData.clientY = e.changedTouches[0].clientY;
			},

			// 加载更多数据
			loadMore() {
				if (this.hasMore) {
					this.page++;
					this.getpyq();

				}
			},
			// 刷新数据
			refreshData() {
				this.page = 1;
				this.getpyq();

				// 模拟数据刷新
				setTimeout(() => {
					// this.list = []; // 清空原有数据
					// this.page = 1; // 重置页数
					// this.loadMore(); // 加载新的数据
					uni.stopPullDownRefresh(); // 停止下拉刷新动作
				}, 1000);
			},
			handleLike(item) {
				// let index = this.list.findIndex(s_item => s_item.id == item.id)
				// if (index >= 0) {
				// 	this.list[index].likeShow = false
				// }
				let like_id = item.id;
				console.log(like_id)
				uni.request({
					url: this.$api.baseUrl + '/api/common/post_like/delete',
					header: {
						'content-type': 'application/json'
					}, // this.$util.getHeader(),
					data: {
						post_id: item.id,
						user_id: uni.getStorageSync('userId')
					},
					method: 'POST',
					success: res => {
						console.log(res);
						uni.hideLoading()
						// this.list = res.data;
						if (res.data.code == 0) {
							let index = this.list.findIndex(s_item => s_item.id == item.id)
							if (index >= 0) {
								this.list[index].liked = ''
								this.list[index].like_count = 0
							}
						}
					},
					fail: res => {
						console.log(res);
					}

				})

				this.$forceUpdate();
			},
			handleLike1(item) {
				// item.likeShow = true
				// let index = this.list.findIndex(s_item => s_item.id == item.id)
				// if (index >= 0) {
				// 	this.list[index].likeShow = true
				// }
				uni.request({
					url: this.$api.baseUrl + '/api/common/post_like/add',
					header: {
						'content-type': 'application/json'
					},
					data: {
						post_id: item.id,
						user_id: uni.getStorageSync('userId')
					},
					method: 'POST',
					success: res => {
						console.log(res);
						uni.hideLoading()
						// this.list = res.data;
						if (res.data.code == 0) {
							let index = this.list.findIndex(s_item => s_item.id == item.id)
							if (index >= 0) {
								this.list[index].liked = item.id
								this.list[index].like_count = 1
							}
						}
					},
					fail: res => {
						console.log(res);
					}

				})
				this.$forceUpdate();
			},
			handleSpesk(item) {
				this.comment_info = item;

				let index = this.list.findIndex(s_item => s_item.id == item.id)
				if (index >= 0) {
					this.list[index].commentShow = true
				}
				this.$forceUpdate();
			},

			getlike(item) {
				console.log('getlike');
				return new Promise((resolve, reject) => {
					uni.request({
						url: this.$api.baseUrl + '/api/common/post_like/fetch',
						header: {
							'content-type': 'application/json'
						},
						data: {
							post_id: item.id,
							user_id: uni.getStorageSync('userId')
						},
						method: 'POST',
						success: res => {
							console.log(res.data.data);
							uni.hideLoading()
							// if (res.data.code == 0) {
							resolve(res.data.data)
							// }
						},
						fail: res => {
							console.log(res);
						}

					})
				})
			},
			getcomment(item) {
				this.comment_info.id = item

				// return new Promise((resolve, reject) => {
				uni.request({
					url: this.$api.baseUrl + '/api/common/post_comment/fetch',
					header: {
						'content-type': 'application/json'
					},
					data: {
						post_id: this.comment_info.id,
						user_id: uni.getStorageSync('userId')
					},
					method: 'POST',
					success: res => {
						// console.log(res);
						uni.hideLoading()
						if (res.data.code == 0) {
							// resolve(res.data.data)

							let index = this.list.findIndex(s_item => s_item.id == this.comment_info.id)
							// console.log(index);
							// console.log(res.data.data);
							if (index >= 0) {
								this.list[index].comment_list = res.data.data
								this.list[index].commentShow = false;
							}

							this.$forceUpdate();
						}
					},
					fail: res => {
						console.log(res);
					}

				})
				// })
			},



			delcircle(item) {
				uni.showModal({
					title: '提示',
					content: '删除该朋友圈?',
					success: res => {
						if (res.cancel) return

						uni.request({
							url: this.$api.baseUrl + '/api/common/post/delete',
							header: {
								'content-type': 'application/json'
							},
							data: {
								id: item.id,
							},
							method: 'POST',
							success: res => {
								// this.list = res.data;

								if (res.data.code == 0) {
									let index = this.list.findIndex(s_item => s_item.id == item.id)
									if (index >= 0) {
										this.list.splice(index, 1);
									}
									this.$forceUpdate();
								}

								this.getcomment()
								this.getpyq()
							},
							fail: res => {
								console.log(res);
							}

						})
					}
				})




			},
			delcomment(item, circle_id) {
				console.log(item, "-=-=-=")
				this.comment_info = item;
				this.circle_id = circle_id;
				uni.showModal({
					title: '提示',
					content: '删除该评论?',
					success: res => {
						if (res.cancel) return

						uni.request({
							url: this.$api.baseUrl + '/api/common/post_comment/delete',
							header: {
								'content-type': 'application/json'
							},
							data: {
								id: item.id,
							},
							method: 'POST',
							success: res => {
								console.log(res, "-=-=-=");
								uni.hideLoading()
								// this.list = res.data;

								if (res.data.code == 0) {
									this.getcomment(this.circle_id)
									// this.getpyq()
									this.$forceUpdate();
								}
							},
							fail: res => {
								console.log(res);
							}

						})
					}
				})




			},
			// changeSpeak(e) {
			// 	console.log('change', e);
			// },
			confirmSpeak(postId) {
				let currentPost = this.list.find(item => item.id === postId);
				if (!currentPost) return;

				console.log(currentPost.valueSpeak); // 当前帖子的评论内容
				uni.request({
					url: this.$api.baseUrl + '/api/common/post_comment/add',
					header: {
						'content-type': 'application/json'
					},
					data: {
						post_id: postId, // 使用当前帖子的ID
						user_id: uni.getStorageSync('userId'),
						content: currentPost.valueSpeak
					},
					method: 'POST',
					success: res => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 0) {
							this.getcomment(postId); // 获取当前帖子的评论

							currentPost.valueSpeak = ''; // 清空当前帖子的评论内容
							currentPost.commentShow = false; // 隐藏评论输入框
						}
					},
					fail: res => {
						console.log(res);
					}
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.ctn {
		z-index: 99999;
		position: absolute;
		width: 100%;
		margin-top: 10px;
	}

	.status_bar {
		height: 430upx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-image: url(../../static/image/banner@3x.png);
		background-size: 100%;
		position: relative;
	}

	// .none-data{
	// 	width: 100%;
	// 	height: 1000upx;
	// 	background: url(../../static/image/img-none@3x.png) no-repeat;
	// 	background-size: 100%;
	// 	position: absolute;
	// 	top: 22%;
	// 	left: 0%;
	// 	z-index: 1;
	// 	border-radius: 40upx;
	// }
	.imgs {
		width: 70%;
		margin-left: 15%;
		margin-top: 130px;
	}

	.bg-box {
		width: 100%;
		height: 1000upx;
		// background: url(../../static/image/img-none@3x.png) no-repeat;
		background-size: 100%;
		background-color: #ffffff;
		position: absolute;
		top: 21%;
		left: 0%;
		z-index: 1;
		border-radius: 40upx;
	}

	.scroll-view-box {
		width: 100%;
		background: #fff;
		border-radius: 40upx;
		position: absolute;
		width: 100%;
		top: 22%;
		left: 0%;
		z-index: 1;
		background: #fff;
		//margin-top: 40upx; // border-radius: 30upx;
	}

	.list {
		width: 100%;
	}

	.name-img {
		width: 110upx;
		height: 110upx;
		border-radius: 10upx;
		background: #d54827;
		font-size: 36upx;
		text-align: center;
		line-height: 110upx;
		color: #fff;
		margin-left: -10upx;
		margin-top: -10upx;
	}

	.u-page {
		padding: 50upx;
		width: 100%;
		border-bottom: 10upx solid #f3f6fd;

		.album-container {
			margin-top: 10upx;
		}

		.name-img {
			width: 90upx;
			height: 90upx;
			border-radius: 10upx;
			background: #d54827;
			font-size: 36upx;
			text-align: center;
			line-height: 90upx;
			color: #fff;
			margin-left: -10upx;
			margin-top: -10upx;
		}

		.album__avatar {
			background: #fff
		}

		.album__content {
			display: flex;
			justify-content: space-between;
			align-items: center
		}

		.u-page {
			padding: 20px;
		}

		.icon-box {
			display: flex;
			margin-top: 26upx;
			align-items: center;
		}

		.speak-box {
			background: #f8f9fb;
			// min-height: 70upx;
			// line-height: 70upx;
			// padding-left: 20upx;
			padding: 20upx;
			border-radius: 20upx;
			margin-top: 20upx;
		}

		.btn-enter {
			position: absolute;
			top: 15upx;
			right: 10upx;
		}
	}

	.album-top {
		@include flex;
		align-items: flex-start;
		align-items: center;

		&__avatar {
			// background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}


	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	::v-deep.u-input--radius {
		background: #f8f9fb;
	}

	.add-comment {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 9999;

		.info {
			display: flex;
			flex-direction: row;
			// height: 60px;
			padding: 20rpx 20rpx 20rpx 20rpx;

			.input {
				flex-grow: 1;
				flex-shrink: 1;
				display: flex;
				align-items: center;
				background: #f2f2f2;
				border-radius: 40rpx 0 40rpx 0 0rpx;
				padding: 20rpx 20rpx;
				line-height: normal;


			}

			.add {
				flex-grow: 0;
				flex-shrink: 0;
				width: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 10rpx;
			}

			.cancel {
				position: absolute;
				right: 10rpx;
				top: 2rpx;

				::v-deep.icon {
					font-size: 40rpx;
					color: #ccc;
				}
			}
		}
	}
</style>